<template>
    <div class="container">
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="item-left">
                    <div class="item-name ellipsis">{{ item.name }}</div>
                    <div class="item-info">
                        <div class="item-free" :style="{ color: getColor(item.freeNumberType) }">空余车位：{{ item.freeNumber }}</div>
                        <span v-if="item.chargeRule">|</span>
                        <div v-if="item.chargeRule" class="item-rule" :class="{ ellipsis: item.chargeRule.length > 8 }">{{ item.chargeRule }}</div>
                        <div v-if="item.chargeRule && item.chargeRule.length > 6" class="item-rule-detail" @click.stop="showDetail(item)">详情</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 停车场详情 -->
        <u-popup :show="detailVisible" mode="center" :round="10" @close="detailVisible = false">
            <div class="detail-content">{{ detailContent }}</div>
        </u-popup>
    </div>
</template>
<script>
import { getParkListAPI } from "../api/api";

const app = getApp();
export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            list: [],
            detailVisible: false,
            detailContent: "",
        };
    },
    onShareAppMessage() {},
    onLoad() {
        this.getParkList({});
    },
    methods: {
        getColor(i) {
            return ["#08AA26", "#FFC600", "#FF0000"][i - 1];
        },
        showDetail(item) {
            this.detailContent = item.chargeRule;
            this.detailVisible = true;
        },
        getParkList(data) {
            wx.showLoading({
                title: "停车场加载中...",
            });
            getParkListAPI(data).then((res) => {
                this.list = res;
                wx.hideLoading();
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";
</style>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30rpx;
    .list {
        flex: auto;
        width: 100%;
        overflow: auto;
        .item {
            width: calc(100% - 64rpx);
            height: 144rpx;
            background-color: #f8f8f8;
            border-radius: 24rpx;
            margin: 0 32rpx;
            margin-bottom: 32rpx;
            display: flex;
            align-items: center;
            .item-left {
                flex: auto;
                padding-left: 30rpx;
                .item-name {
                    width: 500rpx;
                    color: #262626;
                    font-weight: bold;
                    font-size: 36rpx;
                    line-height: 1;
                    margin-bottom: 24rpx;
                }
                .item-info {
                    color: #4d4d4d;
                    font-size: 24rpx;
                    line-height: 1;
                    display: flex;
                    color: #08aa26;
                    align-items: center;
                    span {
                        margin: 0 10rpx;
                        color: #333;
                    }
                    .item-free {
                        flex: none;
                    }
                    .item-rule {
                        width: 200rpx;
                        flex: auto;
                        color: #666;
                        margin-right: 10rpx;
                    }
                    .item-rule-detail {
                        flex: none;
                        color: #009cff;
                        margin-right: 20rpx;
                    }
                }
            }
            .item-right {
                flex: none;
                width: 120rpx;
                padding-right: 18rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .item-icon {
                    width: 42rpx;
                    height: 42rpx;
                    margin-bottom: 10rpx;
                }
                .item-distance {
                    color: #333333;
                    font-size: 24rpx;
                    line-height: 1;
                    text-align: center;
                }
            }
        }
    }
    .detail-content {
        width: 500rpx;
        min-height: 200rpx;
        box-sizing: border-box;
        padding: 30rpx;
        font-size: 24rpx;
        line-height: 36rpx;
    }
}
</style>
